<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人史记录表单</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
        body {
            font-family: 'Noto Sans SC', sans-serif;
            max-width: 750px;
            margin: 0 auto;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    <div class="container mx-auto px-4 py-6 max-w-2xl">
        <!-- 页面标题 -->
        <header class="mb-8">
            <h1 class="text-2xl font-bold text-center text-blue-700">个人史记录表单</h1>
            <p class="text-sm text-center text-gray-600 mt-2">请根据实际情况填写以下内容</p>
        </header>

        <!-- 表单主体 -->
        <form class="space-y-6">
            <!-- 1. 生活与饮食习惯 -->
            <section class="bg-white rounded-lg shadow-md p-5">
                <h2 class="text-lg font-semibold text-blue-600 mb-4 pb-2 border-b border-gray-200">1. 生活与饮食习惯</h2>
                
                <!-- 吸烟史 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">吸烟史</label>
                    <input type="text" placeholder="例如：吸烟20年，每天1包" 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <p class="text-xs text-gray-500 mt-1">请量化记录，如"吸烟20年，每天1包"，已戒烟者记录"已戒烟5年"</p>
                </div>
                
                <!-- 饮酒史 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">饮酒史</label>
                    <input type="text" placeholder="例如：饮白酒20年，每日约100ml" 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <p class="text-xs text-gray-500 mt-1">请量化记录，避免使用"少量"、"适量"等模糊词汇</p>
                </div>
                
                <!-- 饮食偏好 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">饮食偏好</label>
                    <div class="space-y-2">
                        <div class="flex items-center">
                            <input type="checkbox" id="high-salt" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="high-salt" class="ml-2 text-sm text-gray-700">高盐</label>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" id="high-fat" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="high-fat" class="ml-2 text-sm text-gray-700">高脂</label>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" id="high-sugar" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="high-sugar" class="ml-2 text-sm text-gray-700">高糖</label>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" id="spicy" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="spicy" class="ml-2 text-sm text-gray-700">辛辣</label>
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <label class="block text-sm font-medium text-gray-700 mb-1">特殊饮食禁忌</label>
                        <input type="text" placeholder="例如：素食、过敏食物等" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                </div>
                
                <!-- 作息习惯 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">作息习惯</label>
                    <textarea placeholder="例如：长期熬夜、失眠等" rows="2"
                              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                </div>
            </section>

            <!-- 2. 职业与环境暴露史 -->
            <section class="bg-white rounded-lg shadow-md p-5">
                <h2 class="text-lg font-semibold text-blue-600 mb-4 pb-2 border-b border-gray-200">2. 职业与环境暴露史</h2>
                
                <!-- 职业史 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">职业史</label>
                    <input type="text" placeholder="当前及既往职业" 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <p class="text-xs text-gray-500 mt-1">重点记录有无接触粉尘（矽肺）、化学品（苯、铅）、放射性物质等</p>
                </div>
                
                <!-- 居住环境 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">居住环境</label>
                    <textarea placeholder="有无地方病、传染病流行区旅居史（如血吸虫病、疟疾）" rows="2"
                              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                </div>
            </section>

            <!-- 3. 冶游史与性取向 -->
            <section class="bg-white rounded-lg shadow-md p-5">
                <h2 class="text-lg font-semibold text-blue-600 mb-4 pb-2 border-b border-gray-200">3. 冶游史与性取向</h2>
                <p class="text-sm text-gray-600 mb-4">（在保护隐私、建立信任后，于相关科室如皮肤科、感染科、妇科尤为重要）</p>
                
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">性伴侣情况</label>
                        <input type="text" placeholder="请描述" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">有无不洁性行为史</label>
                        <div class="flex space-x-4">
                            <div class="flex items-center">
                                <input type="radio" id="unclean-sex-yes" name="unclean-sex" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
                                <label for="unclean-sex-yes" class="ml-2 text-sm text-gray-700">有</label>
                            </div>
                            <div class="flex items-center">
                                <input type="radio" id="unclean-sex-no" name="unclean-sex" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
                                <label for="unclean-sex-no" class="ml-2 text-sm text-gray-700">无</label>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">性取向</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">请选择</option>
                            <option value="heterosexual">异性恋</option>
                            <option value="homosexual">同性恋</option>
                            <option value="bisexual">双性恋</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">采取的保护措施</label>
                        <textarea placeholder="请描述" rows="2"
                                  class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                    </div>
                </div>
            </section>

            <!-- 4. 其他 -->
            <section class="bg-white rounded-lg shadow-md p-5">
                <h2 class="text-lg font-semibold text-blue-600 mb-4 pb-2 border-b border-gray-200">4. 其他</h2>
                
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">吸毒史</label>
                        <textarea placeholder="种类、方式、年限" rows="2"
                                  class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">重大精神创伤史</label>
                        <textarea placeholder="请描述" rows="2"
                                  class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                    </div>
                </div>
            </section>

            <!-- 提交按钮 -->
            <div class="flex justify-center mt-8">
                <button type="submit" class="px-6 py-3 bg-blue-600 text-white font-medium rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    提交表单
                </button>
            </div>
        </form>
        
        <!-- 页脚 -->
        <footer class="mt-8 text-center text-xs text-gray-500">
            <p>本表单内容将严格保密，仅用于医疗目的</p>
        </footer>
    </div>
</body>
</html>